<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="dashboard-page">
    <el-row>
      <el-col :span="18">
        <div class="user">
          <div class="mannger">
            <img
              style="position: absolute; top: 0; left: 0; height: 148px"
              src="http://www-wms-java.itheima.net/img/dashboard-banner-left@2x.5afd2949.png"
              alt=""
            />
            <img
              style="position: absolute; top: 0; right: 0; height: 148px"
              src="http://www-wms-java.itheima.net/img/dashboard-banner-right@2x.28195570.png"
              alt=""
            />
            <img
              class="user-head"
              src="http://www-wms-java.itheima.net/img/avatar@2x.4f4a758f.png"
              alt=""
            />
            <p class="user-title">仓储管理员</p>
            <p class="subject-title">我不是为了输赢,我就是认真！</p>
            <p class="subject-author">——罗永浩</p>
            <div
              style="
                position: absolute;
                top: 20px;
                right: 20px;
                width: 147px;
                height: 40px;
                background: #f8f5f5;
                border-radius: 6px;
                opacity: 0.79;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-around;
              "
            >
              <div style="font-size: 14px; font-weight: 500; color: #332929">
                北京总仓
              </div>
            </div>
          </div>
        </div>
        <div class="backlog">
          <div class="subject">待办信息</div>
          <div class="ttttt">
            <el-row>
              <el-col :span="8" style="padding-left: 15px; padding-right: 15px">
                <a href="#">
                  <div class="backlog-item">
                    <div class="icon" style="background: rgb(0, 118, 255)">
                      <i
                        class="el-icon-tickets"
                        style="font-size: 30px; color: #fff"
                      ></i>
                    </div>
                    <div class="title">{{ todoList[0].name }}</div>
                    <div class="bottom">
                      <div class="spanlabel">新增</div>
                      <div class="spanValue">{{ todoList[0].value1 }}</div>
                      <div class="spanlabel">待审核</div>
                      <div class="spanValue" style="color: rgb(0, 118, 255)">
                        {{ todoList[0].value2 }}
                      </div>
                    </div>
                  </div>
                </a>
              </el-col>
              <el-col :span="8" style="padding-left: 15px; padding-right: 15px">
                <a href="#">
                  <div class="backlog-item">
                    <div class="icon" style="background: rgb(255, 178, 0)">
                      <i
                        class="el-icon-document-copy"
                        style="font-size: 30px; color: #fff"
                      ></i>
                    </div>
                    <div class="title">{{ todoList[1].name }}</div>
                    <div class="bottom">
                      <div class="spanlabel">新增</div>
                      <div class="spanValue">{{ todoList[1].value1 }}</div>
                      <div class="spanlabel">待审核</div>
                      <div class="spanValue" style="color: rgb(255, 178, 0)">
                        {{ todoList[1].value2 }}
                      </div>
                    </div>
                  </div>
                </a>
              </el-col>
              <el-col :span="8" style="padding-left: 15px; padding-right: 15px">
                <a href="#">
                  <div class="backlog-item">
                    <div class="icon" style="background: rgb(255, 113, 0)">
                      <i
                        class="el-icon-document"
                        style="font-size: 30px; color: #fff"
                      ></i>
                    </div>
                    <div class="title">{{ todoList[2].name }}</div>
                    <div class="bottom">
                      <div class="spanlabel">新增</div>
                      <div class="spanValue">{{ todoList[2].value1 }}</div>
                      <div class="spanlabel">待审核</div>
                      <div class="spanValue" style="color: rgb(255, 113, 0)">
                        {{ todoList[2].value2 }}
                      </div>
                    </div>
                  </div>
                </a>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
      <el-col class="divRight" :span="5">
        <div class="notes">
          <div class="subject">通知/公告</div>
          <div class="item" v-for="(item, index) in noticeList" :key="index">
            <div class="hr"></div>
            <div class="title">{{ item.title }}</div>
            <div class="time">{{ item.time }}</div>
          </div>
        </div>
      </el-col>
      <el-col :span="24">
        <div class="tasks">
          <div class="subject">任务导航</div>
          <div class="item-list">
            <el-row>
              <el-col :span="5" style="padding-left: 10px; padding-right: 10px">
                <a href="#">
                  <div class="tasks-item">
                    <div class="icon" style="background: rgb(0, 118, 255)">
                      <i
                        class="el-icon-box"
                        style="font-size: 25px; color: #fff"
                      ></i>
                    </div>
                    <div class="title">收货任务</div>
                  </div>
                </a>
              </el-col>
              <el-col :span="5" style="padding-left: 10px; padding-right: 10px">
                <a href="#">
                  <div class="tasks-item">
                    <div class="icon" style="background: rgb(82, 212, 243)">
                      <i
                        class="el-icon-copy-document"
                        style="font-size: 25px; color: #fff"
                      ></i>
                    </div>
                    <div class="title">上架任务</div>
                  </div>
                </a>
              </el-col>
              <el-col :span="5" style="padding-left: 10px; padding-right: 10px">
                <a href="#">
                  <div class="tasks-item">
                    <div class="icon" style="background: rgb(255, 113, 0)">
                      <i
                        class="el-icon-reading"
                        style="font-size: 25px; color: #fff"
                      ></i>
                    </div>
                    <div class="title">盘点任务</div>
                  </div>
                </a>
              </el-col>
              <el-col :span="5" style="padding-left: 10px; padding-right: 10px">
                <a href="#">
                  <div class="tasks-item">
                    <div class="icon" style="background: rgb(255, 96, 158)">
                      <i
                        class="el-icon-present"
                        style="font-size: 25px; color: #fff"
                      ></i>
                    </div>
                    <div class="title">拣货任务</div>
                  </div>
                </a>
              </el-col>
              <el-col :span="5" style="padding-left: 10px; padding-right: 10px">
                <a href="#">
                  <div class="tasks-item">
                    <div class="icon" style="background: rgb(255, 178, 0)">
                      <i
                        class="el-icon-set-up"
                        style="font-size: 25px; color: #fff"
                      ></i>
                    </div>
                    <div class="title">交接任务</div>
                  </div>
                </a>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
      <el-col :span="24">
        <div>
          <el-col :span="6">
            <div>
              <p
                style="
                  font-size: 16px;
                  font-family: PingFangSC-Semibold, PingFang SC;
                  font-weight: 600;
                  color: #332929;
                  line-height: 22px;
                  padding-left: 30px;
                "
              >
                入库/出库信息
              </p>
            </div>
          </el-col>
          <el-col :span="18">
            <div class="button1">
              <button
                class="a1"
                @click="homesum('w')"
                style="background-color: orange; border-radius: 5px"
              >
                本周
              </button>
              <button
                class="a1"
                @click="homesum('e')"
                style="border-radius: 5px"
              >
                本月
              </button>
              <button
                class="a1"
                @click="homesum('c')"
                style="border-radius: 5px"
              >
                全年
              </button>
            </div>
          </el-col>
        </div>
        <div class="inout-charts">
          <inoutCharts class="a333" ref="inout" :homesumList="homesumList" />
        </div>
      </el-col>
      <el-col class="last" :span="24">
        <el-col :span="8">
          <div class="use-charts">
            <div class="user-title">库存使用情况</div>
            <useCharts
              :stockUseStatusList="stockUseStatusList"
              style="padding-bottom: 30px"
            />
          </div>
        </el-col>
        <el-col :span="16">
          <div class="libs-charts">
            <div class="a25">
              <div class="a66">
                <div class="a99" style="background-color: #0076ff"></div>
                <span style="width: 50px; padding-right: 100px">拣货区</span>
                <span style="padding-right: 50px">19%</span> <span>348</span>
              </div>
              <div class="a66">
                <div class="a99" style="background-color: #52d4f3"></div>
                <span style="padding-right: 100px">出库区</span>
                <span style="padding-right: 50px">26%</span> <span>487</span>
              </div>
              <div class="a66">
                <div class="a99" style="background-color: #5d7092"></div>
                <span style="width: 50px; padding-right: 88px">暂存库区</span>
                <span style="padding-right: 50px">37%</span> <span>677</span>
              </div>
              <div class="a66">
                <div class="a99" style="background-color: #ffb200"></div>
                <span style="width: 50px; padding-right: 83px">进货暂存区</span>
                <span style="padding-right: 50px">6%</span> <span>126</span>
              </div>
              <div class="a66">
                <div class="a99" style="background-color: #ff7100"></div>
                <span style="width: 50px; padding-right: 76px">出货暂存区</span>
                <span style="padding-right: 50px">16%</span> <span>298</span>
              </div>
            </div>
            <libsCharts />
          </div>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import inoutCharts from './components/inoutCharts'
import useCharts from './components/useCharts'
import libsCharts from './components/libsCharts'
import { homesum, stockUseStatus, todo } from '@/api/home.js'
export default {
  components: {
    inoutCharts,
    useCharts,
    libsCharts
  },
  data () {
    return {
      noticeList: [
        { title: '紧急盘点通知', time: '2020.12.30 18:23:14' },
        { title: '运维服务更新通知', time: '2021.01.25 18:23:14' },
        { title: '客户入库变更通知', time: '2021.01.26 18:23:14' },
        { title: '五一放假通知', time: '2021.02.15 18:23:14' },
        { title: '品达物流系统对接通知', time: '2021.3.25 18:23:14' }
      ],
      stockUseStatusList: [],
      homesumList: {},
      todoList: []
    }
  },
  async created () {
    this.homesum('w')
    this.stockUseStatus()
    this.todo()
  },
  methods: {
    async homesum (data) {
      const res = await homesum(data)
      console.log(res.data.data)
      this.homesumList = res.data.data
      this.$refs.inout.changeFn()
    },

    async stockUseStatus () {
      const {
        data: { data }
      } = await stockUseStatus()
      console.log(data)
      this.stockUseStatusList = data
    },
    async todo () {
      const {
        data: { data }
      } = await todo()
      console.log(data)
      this.todoList = data
    }
  }
}
</script>

<style lang="scss" scoped>
.a99 {
  float: left;
  margin-top: 7px;
  margin-right: 5px;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: #0076ff;
}
.a25 {
  width: 500px;
  position: absolute;
  margin-left: 420px;
  margin-top: 80px;
  .a66 {
    margin-bottom: 10px;
  }
  span {
    font-size: 12px;
  }
}
.a333 {
  margin-top: 70px;
}
.a1 {
  white-space: nowrap;
  background: #fff;
  border: 1px solid #dcdfe6;
  font-weight: 500;
  color: #606266;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  position: relative;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  padding: 12px 20px;
  font-size: 12px;
  border-radius: 0;
}
.button1 {
  // float: right;

  margin-left: 650px;
  margin-top: 30px;
}
.last {
  margin-bottom: 0px;
}
.user-title {
  font-size: 16px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #332929;
  line-height: 22px;
}
.libs-charts {
  height: 300px;
  background: #fff;
  box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
  border-radius: 12px;
  padding: 25px;
}
.use-charts {
  height: 300px;
  background: #fff;
  box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
  border-radius: 12px;
  padding: 25px;
  margin-right: 30px;
}
.inout-charts {
  // height: 500px;
  background: #fff;
  box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
  border-radius: 12px;
  padding: 25px;
}
.tasks {
  height: 160x;
  background: #fff;
  box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
  border-radius: 12px;
  padding: 25px;
  .subject {
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #332929;
    line-height: 22px;
  }
  .el-row {
    display: flex;
  }
  a: {
    color: inherit;
    outline: none;
    text-decoration: none;
    background-color: transparent;
  }
  a:hover {
    .tasks-item {
      background-color: #fff;
      box-shadow: 0 2px 6px 0 rgb(144 142 142 / 17%);
    }
  }
  .tasks-item {
    margin-top: 25px;
    position: relative;
    width: 100%;
    height: 93px;
    background: #fbf7f7;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
  }
  .icon {
    width: 50px;
    height: 50px;
    background: #0076ff;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .title {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #332929;
    line-height: 22px;
  }
}
a {
  color: inherit;
  outline: none;
  text-decoration: none;
  background-color: transparent;
}
a:hover {
  .backlog-item {
    background-color: #fff;
    box-shadow: 0 2px 6px 0 rgb(144 142 142 / 17%);
  }
}

.divRight {
  margin-left: 45px;
}
.notes {
  height: 409px;
  background: #fff;
  box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
  border-radius: 12px;
  padding: 30px;

  .subject {
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #332929;
    line-height: 22px;
  }
  .item {
    margin-top: 15px;
    .hr {
      width: 201px;
      height: 1px;
      background-color: #f5efee;
    }
    .title {
      width: 195px;
      height: 18px;
      font-size: 13px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #332929;
      line-height: 18px;
      margin-top: 15px;
    }
    .time {
      width: 115px;
      height: 17px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #887e7e;
      line-height: 17px;
      margin-top: 10px;
    }
  }
}
.backlog-item {
  margin-top: 25px;
  position: relative;
  height: 146px;
  background: #fbf7f7;
  border-radius: 8px;
  padding: 20px;

  cursor: pointer;
  .icon {
    width: 49px;
    height: 49px;
    background: #0076ff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .title {
    position: absolute;
    top: 34px;
    left: 85px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #332929;
    line-height: 22px;
  }
  .bottom {
    position: absolute;
    height: 30px;
    bottom: 40px;
    display: flex;
    justify-content: space-around;
    .spanlabel {
      line-height: 50px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #887e7e;
      margin-right: 10px;
      vertical-align: super;
    }
    .spanValue {
      font-size: 36px;
      font-family: DIN-Medium, DIN;
      font-weight: 500;
      color: #332929;
      margin-right: 20px;
      margin-bottom: 10px;
      padding-bottom: 10px;
    }
  }
}
.backlog {
  height: 240px;
  background: #fff;
  box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
  border-radius: 12px;
  padding: 15px;

  .subject {
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #332929;
    line-height: 22px;
  }
}
.el-col {
  margin-bottom: 20px;
}

.dashboard-page {
  margin: 10px;
  background-color: #fdfafa;
}

.user {
  margin-bottom: 30px;
  position: relative;
  height: 148px;
  background: linear-gradient(270deg, #ffc771, #ffa634);
  box-shadow: 0 0 6px 0 rgb(188 151 69 / 12%);
  border-radius: 12px;
  .user-head {
    height: 62px;
    position: absolute;
    top: 40px;
    left: 55px;
    border-radius: 100%;
  }
  .user-title {
    position: absolute;
    left: 55px;
    bottom: 1px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #aaa8a8;
    line-height: 22px;
    text-shadow: 1px 2px 2px #aaa8a8;
  }
  .subject-title {
    position: absolute;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #fff;
    font-size: 18px;
    line-height: 25px;
    text-shadow: 1px 2px 2px #aaa8a8;
    top: 8px;
    left: 180px;
  }
  .subject-author {
    position: absolute;
    color: #fff;
    top: 50px;
    left: 400px;
    font-size: 16px;
    text-shadow: 1px 2px 2px #aaa8a8;
  }
}
</style>
